<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <input type="checkbox"> 菠萝
    <input type="checkbox">香蕉
    <input type="checkbox">苹果
    <br>
    <button class="selAll">全选</button>
    <button class="noSel">全不选</button>
    <button class="fanxuan">反选</button>
</body>
<script>
    let inputs = document.querySelectorAll('input')
    let selAll = document.getElementsByClassName('selAll')[0]
    let noSel = document.getElementsByClassName('noSel')[0]
    let fanxuan = document.getElementsByClassName('fanxuan')[0]
    //  全选
    selAll.onclick = function () {
        inputs.forEach(element => element.checked = true)
    }
    // 全不选
    noSel.onclick = function () {
        inputs.forEach(element => element.checked = false)
    }
    // 反选 勾上的变为没有勾 首先全勾上，再本来勾上的变为没勾上
    fanxuan.onclick = function () {
        inputs.forEach(element => {
            element.checked = !element.checked
        })

    }

</script>

</html>